<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h2>狭义闭包</h2>
    <ul class="box">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>5555</li>
    </ul>
</body>
<script>
    //1.for+数组函数
    let arr = [];

    for (var i = 0; i < 5; i++) {

        (function(i) {
            arr[i] = function() {
                return i;
            }

        })(i)
    }

    // console.log(arr[0]()) //?? 1
    // console.log(arr[1]()) //?? 
    // console.log(arr[2]()) //??
    // console.log(arr[3]()) //??
    // console.log(arr[4]()) //??


    //2.for循环+定时器
    // for (var i = 0; i < 5; i++) {
    //     (function(i) {

    //         setTimeout(function() {
    //             console.log(i) //5次循环结果是什么？？？  0，1，2，3，4
    //         }, 1000 * i)
    //     })(i)
    // }

    //3.for循环+DOM操作
    // const allLi = document.querySelectorAll('.box>li')
    // for (var i = 0; i < allLi.length; i++) {
    //     (function(i) {
    //         allLi[i].onclick = function() {
    //             console.log(i)
    //         }
    //     })(i)
    // }

    //4.封装组件

    const tools = (function() {

        let i = 0;


        const _getValue = () => {
            console.log(i)
            return i;
        }

        const add = () => {
            i++

        }


        return {
            add,
            _getValue
        }
    })()



    tools.add()
    tools._getValue()
</script>

</html>